<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>散点图</title>
    <style>
         #main {
            width : 1200px;
            height: 650px;
            margin : 50px auto;
        }
    </style>
</head>
<body>
    <div id="main"></div>
</body>
<script src="../static/js/echarts.js"></script>
<script>
    var scatterChart = echarts.init(document.getElementById('main'));
    var scatterOption = {
        title: {
            text: '{{title}}',
            subtext: '{{sTitle}}'
        },
        grid: {
            left: '3%',
            right: '7%',
            bottom: '7%',
            containLabel: true
        },
        tooltip: {{tooltip|safe}},
        toolbox: {
            feature: {
                dataZoom: {},
                brush: {
                    type: ['rect', 'polygon', 'clear']
                }
            }
        },
        legend: {
            data: {{legend|safe}},
            left: 'center',
            bottom: 10
        },
        xAxis: [
            {
                type: 'value',
                scale: true,
                axisLabel: {
                    formatter: '{value} {{scaX|safe}}'
                },
                splitLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                scale: true,
                axisLabel: {
                    formatter: '{value} {{scaY|safe}}'
                },
                splitLine: {
                    show: false
                }
            }
        ],
        series: {{series|safe}}
    };
    scatterChart.setOption(scatterOption);
</script>
</html>